﻿@{
    Layout = "Admin_Layout";
    ViewData["Title"] = "广告管理";
}
@section Style {
    <style>
        .mydiv .el-form .el-form-item .el-form-item__content, .el-form-item__label {
            font-size: 15px;
            color: black;
            height: 10px;
            margin-bottom: 5px;
        }

        .mydiv .form-class .el-input__inner {
            width: 200px;
            height: 30px;
            padding: 4px;
        }

        .el-button-operate {
            height: 29px;
            line-height: 0.4;
            width: 80px;
            border-radius: 2px;
        }

            .el-button-operate span {
                font-family: Microsoft YaHei UI;
                color: #fff;
                font-size: 14px;
                letter-spacing: 1px;
            }

        /* 搜索框 */
        .input-with-select {
            width: 260px;
            padding: 4px;
        }

        .mydatePicker .el-input__inner {
            padding-left: 28px !important;
        }
    </style>
}
<div class="mydiv">
    <div style="margin-left:30px;max-width:1200px;">
        <div style="height:40px;">
            <div style="text-align: right;">
                <div style="float:right;">
                    <el-input placeholder="请输入客户名称搜索" v-model.trim="searchInput" class="input-with-select" size="mini">
                        <el-button slot="append" icon="el-icon-search" @@click="searchHandle"></el-button>
                    </el-input>
                </div>
            </div>
        </div>
        <div>
            <template>
                <el-table :data="tableData" :row-style="{height: '48px'}" :cell-style="{padding: '0'}"
                          style="width: 100%;border-top:1px solid;border-color:lightgray;font-size:13px;min-height:360px;max-height:360px;">
                    <el-table-column prop="date"
                                     label="日期"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="customerName"
                                     label="客户"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="customerPhone"
                                     label="电话"
                                     width="100">
                    </el-table-column>
                    <el-table-column prop="price"
                                     label="价格"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="endDate"
                                     label="结束日期"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="isShow"
                                     label="状态"
                                     width="150">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isShow"
                                       @@change="statusChanged(scope.row)"
                                       active-text="启用"
                                       inactive-text="禁用">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="advertType"
                                     label="广告类型"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="readCount"
                                     label="点击次数"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="advertUrl"
                                     label="链接地址"
                                     width="140">
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="操作"
                                     width="160">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       @@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <div style="">
            <div class="block" style="margin-top:18px;margin-bottom:20px;">
                <el-pagination @@current-change="handleCurrentChange"
                               :current-page.sync="currentPageNum"
                               :page-size="pageSize"
                               layout="total, prev, pager, next, jumper"
                               background
                               :total="petInfoCount">
                </el-pagination>
            </div>
        </div>
    </div>
    <div style="background-color:black;height:1px; border:none;margin-top:20px;"></div>
    <div style="margin-top:20px;text-align:left;margin-left:30px;">
        <div style="width:320px;float:left;">
            <div>
                <el-form ref ="form" :model="form" :rules="rules" label-width="88px" class="form-class">
                            <el-form-item prop="customerName" label="客户">
                                <el-input maxlength="20" v-model.trim="form.customerName"></el-input>
                            </el-form-item>
                            <el-form-item prop="customerPhone" label="电话">
                                <el-input maxlength="20" v-model.trim="form.customerPhone"></el-input>
                            </el-form-item>
                            <el-form-item prop="price" label="价格">
                        <el-input maxlength="20" v-model.trim="form.price" type="number"></el-input>
                            </el-form-item>
                            <el-form-item prop="endDate" label="结束日期">
                                <el-date-picker v-model="form.endDate" class="mydatePicker" style="width:200px;"
                                                value-format="yyyy-MM-dd"
                                                type="date"
                                                placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-radio-group v-model="form.isShow">
                                    <el-radio :label="1">启用</el-radio>
                                    <el-radio :label="2">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                    <el-form-item label="广告类型">
                        <el-radio-group v-model="form.advertType" @@change="advertTypeChange">
                                    <el-radio :label="1">横幅</el-radio>
                                    <el-radio :label="2">块状</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="advertUrl" label="链接地址">
                                <el-input maxlength="20" v-model.trim="form.advertUrl"></el-input>
                            </el-form-item>
                </el-form>
            </div>
            <div style="margin-top:40px;text-align:center;">
                <el-button type="primary" @@click="submitForm('form')" style="width:110px;">确 定</el-button>
                <el-button @@click="clearForm" style="width:110px;">清 空</el-button>
            </div>
        </div>
        <div style="float:left;" id="bannerImgDiv">
            <div><img style="width:1020px;height:100px;" :src="bannerImgUrl" title="请选择广告图片" /></div>
            <div style="margin-top:10px;">
                <el-upload class="upload"
                           list-type="picture"
                           accept=".jpg , .jpeg , .png"
                           :show-file-list="false"
                           ref="upload"
                           action="string"
                           :file-list="coverImgList"
                           :auto-upload="false"
                           :http-request="uploadFile"
                           :on-change="bannerHandleChange"
                           :on-preview="handlePreview"
                           :on-remove="handleRemove"
                           multiple="false">
                    <el-button slot="trigger" size="small" type="primary" @@click="coverImgFile">广告图片</el-button>
                    <div slot="tip" class="el-upload__tip"><span style="color:red;font-size:13px;margin-right:4px;">*</span>[jpg/jpeg/png图片, 1020*100, 小于{{imgSize}}K]</div>
                </el-upload>
            </div>
        </div>
        <div style="float:left;display:none;" id="blockImgDiv">
            <div><img style="width:320px;height:240px;" :src="blockImgUrl" title="请选择广告图片" /></div>
            <div style="text-align:center;width:320px;margin-top:10px;">
                <el-upload class="upload"
                           list-type="picture"
                           accept=".jpg , .jpeg , .png"
                           :show-file-list="false"
                           ref="upload"
                           action="string"
                           :file-list="coverImgList"
                           :auto-upload="false"
                           :http-request="uploadFile"
                           :on-change="blockHandleChange"
                           :on-preview="handlePreview"
                           :on-remove="handleRemove"
                           multiple="false">
                    <el-button slot="trigger" size="small" type="primary" @@click="coverImgFile">广告图片</el-button>
                    <div slot="tip" class="el-upload__tip"><span style="color:red;font-size:13px;margin-right:4px;">*</span>[jpg/jpeg/png图片, 320*240, 小于{{imgSize}}K]</div>
                </el-upload>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script>
        var app = new Vue({
            el: "#app",
            mounted: function () {
                this.getAdvertPagination(1, '');
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertTypeChange(val) {
                    if (val === 1) {
                        $("#bannerImgDiv").show();
                        $("#blockImgDiv").hide();
                    }
                    else{
                        $("#bannerImgDiv").hide();
                        $("#blockImgDiv").show();
                    }

                    this.coverImgList = [];
                    this.bannerImgUrl = '/advert.jpg';
                    this.blockImgUrl = '/advert_block.jpg';
                },
                bannerHandleChange(file, fileList) {

                    let isLt10M = file.size / 1024 < this.imgSize;
                    if (!isLt10M) {
                        this.$message.error("图片大小不能超过" + this.imgSize + "KB!");
                        return;
                    }

                    // 限制类型只能为jpg,png
                    let isJPG = file.raw.type === 'image/jpeg';
                    let isPng = file.raw.type === 'image/png';
                    if (!isJPG && !isPng) {
                        this.$message.error("请上传正确格式的图片!");
                        return;
                    }

                    if (fileList.length > 0) {
                        app.coverImgList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件

                        let URL = window.URL || window.webkitURL;
                        app.bannerImgUrl = URL.createObjectURL(app.coverImgList[0].raw);
                    }
                },
                blockHandleChange(file, fileList) {

                    let isLt10M = file.size / 1024 < this.imgSize;
                    if (!isLt10M) {
                        this.$message.error("图片大小不能超过" + this.imgSize + "KB!");
                        return;
                    }

                    // 限制类型只能为jpg,png
                    let isJPG = file.raw.type === 'image/jpeg';
                    let isPng = file.raw.type === 'image/png';
                    if (!isJPG && !isPng) {
                        this.$message.error("请上传正确格式的图片!");
                        return;
                    }

                    if (fileList.length > 0) {
                        app.coverImgList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件

                        let URL = window.URL || window.webkitURL;
                        app.blockImgUrl = URL.createObjectURL(app.coverImgList[0].raw);
                    }
                },
                //获取分页信息
                getAdvertPagination(pageNum, searchInput) {
                    axios.post('../../Super/SuperHome/GetAdvertPagination', {
                        "pageNum": pageNum,
                        "customerName": searchInput
                    }).then(response => {
                        this.tableData = response.data.data;
                        this.petInfoCount = response.data.dataCount;

                        this.currentPageNum = pageNum;
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //搜索
                searchHandle() {
                    this.currentPageNum = 1;
                    this.getAdvertPagination(this.currentPageNum, app.searchInput);
                },
                //翻页
                handleCurrentChange(val) {
                    this.getAdvertPagination(val, this.searchInput);
                },
                //单行禁用/启用
                statusChanged(row) {
                    var tipInfo = "禁用";
                    if (row.isShow === true) {
                        tipInfo = "启用";
                    }

                    this.$confirm('确定要' + tipInfo + '该广告吗? ', "确认",
                        {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                        .then(async () => {

                            axios.post('../../Super/SuperHome/ChangeAdvertStatus', {
                                "dataids": row.dataid,
                                "status": row.isShow,
                            }).then(response => {
                                if (response.data === 'ok') {
                                    this.getAdvertPagination(this.currentPageNum, this.searchInput);
                                    this.$message({
                                        type: 'success',
                                        message: tipInfo + '成功!'
                                    });
                                }
                            }, error => {
                                alert("错误提示：" + error.message);
                            });

                        })
                        .then(() => {
                            this.msgSuccess(text + "成功");
                        })
                        .catch(() => {
                            //取消
                            row.isShow = row.isShow === true ? false : true;
                        });
                },
                //编辑数据
                handleEdit(index, row) {
                    axios.post('../../Super/SuperHome/GetAdvertInfo', {
                        "dataid": row.dataid
                    }).then(async res => {
                        await app.restoreData(res.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //编辑时恢复数据
                async restoreData(data) {
                    app.form.dataid = data.id;
                    app.form.customerName = data.customername;
                    app.form.customerPhone = data.customerphone;
                    app.form.price = data.price;
                    app.form.endDate = data.enddate;
                    app.form.isShow = data.isshow === true ? 1 : 2;
                    app.form.advertType = data.isblock === false? 1:2;
                    app.form.advertUrl = data.adverturl;

                    //广告图片
                    var vueFileObj = await app.getVueFile("../../Super/SuperHome/DownAdvertFile", data.imgsrc);
                    app.coverImgList = [];
                    app.coverImgList.push(vueFileObj);

                    if (app.form.advertType === 1) {
                        $("#bannerImgDiv").show();
                        $("#blockImgDiv").hide();
                        app.bannerImgUrl = URL.createObjectURL(vueFileObj.raw);
                    }
                    else {
                        $("#bannerImgDiv").hide();
                        $("#blockImgDiv").show();
                        app.blockImgUrl = URL.createObjectURL(vueFileObj.raw);
                    }
                },
                //清除输入框
                clearForm() {
                    app.form.dataid = -1;
                    app.form.customerName = '';
                    app.form.customerPhone = '';
                    app.form.price = '';
                    app.form.endDate = '';
                    app.form.isShow = 1;
                    app.form.advertType = 1;
                    app.form.advertUrl = '';

                    this.coverImgList = [];
                    this.bannerImgUrl = '/advert.jpg';
                    this.blockImgUrl = '/advert_block.jpg';
                },
                async submitForm(formName) {
                    if (this.coverImgList.length === 0) {
                        this.$message.warning('广告图片不能为空');
                        return;
                    }

                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {

                            let formData = new FormData();

                            //广告图片
                            for (var i = 0; i < this.coverImgList.length; i++) {
                                formData.append("coverImg" + i, this.coverImgList[i].raw);
                            }

                            var textData = {
                                "dataid": app.form.dataid, "customerName": app.form.customerName, "customerPhone": app.form.customerPhone, "price": app.form.price,
                                "endDate": app.form.endDate,"isShow": app.form.isShow, "advertType": app.form.advertType, "advertUrl": app.form.advertUrl
                            };

                            formData.append("textData", JSON.stringify(textData));

                            await axios.post('../../Super/SuperHome/AddOrUpdateAdvertInfo', formData, {
                                "Content-Type": "multipart/form-data;charset=utf-8"
                            }).
                            then(res => {
                                    if (res.data == 'ok') {
                                        this.$message.success('提交成功');
                                        this.clearForm();
                                        this.getAdvertPagination(this.currentPageNum, this.searchInput);
                                    }
                                    else {
                                        this.$message.error(res.data);
                                    }
                                }, error => {
                                    alert("错误提示：" + error.message);
                                });


                        } else {
                            console.log('error submit!');
                            return false;
                        }
                    });
                },
            },
            data() {
                return {
                    bannerImgUrl: '/advert.jpg',
                    blockImgUrl: '/advert_block.jpg',
                    coverImgList: [],
                    petInfoCount: 0,
                    currentPageNum: 1,
                    defaultMenuActive: '4',
                    searchInput: '',
                    pageSize: @Html.Raw(ViewData["pageSize"]),
                    imgSize: @Html.Raw(ViewData["imgSize"]),
                    tableData: [],
                    form: {
                        dataid: -1,
                        customerName: '',
                        customerPhone: '',
                        price: '',
                        endDate: '',
                        isShow: 1,
                        advertType:1,
                        advertUrl:'',
                    },
                    rules: {
                        customerName: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        customerPhone: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        price: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        endDate: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        advertUrl: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                    },
                }
            }
        });
    </script>
}